<template>
	<view >
			<view class="release_content">
						<view class="textarea acea-row row-between">
							<textarea placeholder='请输入描述词' name="prompt" placeholder-class='placeholder'v-model="desc" maxlength="1000"></textarea>
                            <view class="desc">
                                描述词
                            </view>
                        </view>
                       <view class="cateTitle acea-row row-between">
                           <view class="title acea-row"> 财宝类别  <image src="../../../static/images/cate1.png" mode=""></image>
                           </view>
                          <!-- <view class="">
                               更多
                               <text class="iconfont icon-xiangyou"></text>
                           </view> -->
                       </view> 
                       <view class="cateContent">
                               <view class=" cateName" v-for="(i,n) in cateList" :key="n" @click="changeValue(i)" >
                                     <view :class="i.value==cateValue?'active':''">
                                         {{i.type_name}}
                                     </view>
                                     <image :class="i.value==cateValue?'activeimage':''"  :src="i.image" mode=""></image>
                               </view>
                       </view>
                       <view class="cateTitle acea-row row-between">
                           <view class="title acea-row"> 首饰类别  <image src="../../../static/images/cate2.png" mode=""></image>
                           </view>
                        <!--   <view class="">
                               更多
                               <text class="iconfont icon-xiangyou"></text>
                           </view> -->
                       </view> 
                       <view class="cateContent">
                            <view class=" cateName" v-for="(i,n) in cateList1" :key="n" @click="changeValues(i)" >
                                  <view :class="i.value==cateValue1?'active':''">
                                      {{i.category_name}}
                                  </view>
                                  <image :class="i.value==cateValue1?'activeimage':''"  :src="i.image" mode=""></image>
                            </view>
                       </view>
				
			</view>
            <view class="bottom">
                <view class="createNum acea-row  row-column">
                    <text>今日剩余</text>
                    <text class="num" v-if="">{{today_counts?today_counts:0}} 张</text>
                </view>
                    <view class="release_btn  acea-row row-center" @click="createAiTask">
                        <image src="../../../static/images/design.png" mode="widthFix"></image>
                        开始设计</view>
            </view>
            <uni-popup ref="choseType" borderRadius="15px" is-mask-click="false" type="bottom">
                <view class="choseType">
                        <view class="choseText">
                            
                            <text style="color: #fff;font-size: 28rpx;">文生图</text>
                            <text style="color: #999;font-size: 24rpx;">文字描述生成图片</text>
                        </view>
                        <view class="chosePicture">
                            <text  style="color: #fff;font-size: 28rpx;">图生图</text>
                            <text style="color: #999;font-size: 24rpx;">图像风格转换</text>
                        </view>
                </view>
            </uni-popup>
		
	</view>	
</template>

<script>
	
	import { mapGetters } from "vuex";
	import {TOKENNAME, HTTP_REQUEST_URL} from '@/config/app.js';
	import { toLogin } from '@/libs/login.js';
	import {signAi,intentionType,intentionCate ,aiCounts,AiSamelmg} from "@/api/ai";
	import { getUserInfo } from '@/api/user.js';
	import { setStorage, getStorage } from '../../../libs/uniApi.js';
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
	import { configMap } from '@/utils';
    import { serverNotice } from '@/utils/SubscribeMessage.js';
	import store from '@/store';
    
	export default {
		components: {
			
		},
		data() {
			return {
				desc:'',
                cateList:[
                  
                ],
                today_counts:0,
                cateValue:'Jade',
                cateValue1:'Ring',
                cateText:"翡翠",
                cateText1:"戒指",
                loading:false,
                text:[
                    
                ],
                cateTextArr:{
                    '翡翠戒指':'我想要设计一款刻有莲花形状的翡翠戒指，整体风格要典雅大气',
                    '黄金戒指':'我想设计一个雕刻有狮子头的黄金戒指，狮子代表着勇敢与力量，整体设计要高贵复古，展现黄金的质感与光泽',
                    '银戒指':'我想要设计一款以中国传统蝴蝶为设计元素的银戒指，蝴蝶代表着自由与美好，整体设计要简洁大气，展现银的纯净之美',
                    '钻石戒指':'我想要设计一款优雅的钻石戒指，造型夸张，多一点线条，犹如蝴蝶一样优雅',
                    '红宝石戒指':'我想设计一个雕刻有中国传统牡丹花的红宝石戒指，牡丹代表着富贵与美好，整体设计要高贵华丽，展现红宝石的鲜艳与光泽',
                    '蓝宝石戒指':'我想要设计一款以海洋为灵感的蓝宝石戒指，展现海洋的广阔与深邃，整体风格要典雅大气',
                    '祖母绿手镯':'我想要设计一款以森林为灵感的祖母绿戒指，展现森林的生机与神秘，整体风格要典雅大气',
                    '珍珠戒指':'设计一款中国风的珍珠戒指，要磅礴大气，复古典雅',
                    '碧玺戒指':'我想要设计一款以彩虹为灵感的碧玺戒指，展现彩虹的缤纷与绚丽，整体风格要典雅大气',
                    '翡翠手镯':'我想设计一个雕刻有中国传统龙凤呈祥图案的翡翠手镯，代表着吉祥与美好，整体设计要高贵复古',
                    '黄金手镯':'我想设计一个雕刻有狮子头的黄金手镯，狮子代表着勇敢与力量，整体设计要高贵复古，展现黄金的质感与光泽',
                    '银手镯':' 我想要设计一款以月亮为灵感的银手镯，展现月亮的柔美与神秘，整体风格要典雅大气',
                    '钻石手镯':' 我想要设计一款以星星为灵感的钻石手镯，展现星星的璀璨与永恒，整体风格要典雅大气',
                    '红宝石手镯':'我想要设计一款典雅复古的红宝石手镯，风格哥特式，造型夸张',
                    '蓝宝石手镯':'我想要设计一款以海洋为灵感的蓝宝石手镯，展现海洋的广阔与深邃，整体风格要典雅大气',
                    '祖母绿手镯':'我想要设计一款以森林为灵感的祖母绿手镯，展现森林的生机与神秘，整体风格要典雅大气',
                    '珍珠手镯':'我想要设计一款以可爱的珍珠手镯，风格可爱，没有太多棱角',
                    '碧玺手镯':' 我想要设计一款以中国传统蝴蝶为设计元素的碧玺手镯，蝴蝶代表着自由与美好，整体设计要简洁大气，展现碧玺的多彩之美',
                    '翡翠耳环':'我想要设计一款以太阳为灵感的黄金耳环，展现太阳的辉煌与力量，整体风格要大气华丽',
                    '银耳环':'我想要设计一款以月亮为灵感的银耳环，展现月亮的柔美与神秘，整体风格要典雅大气',
                    '钻石耳环':'我想要设计一款以星星为灵感的钻石耳环，展现星星的璀璨与永恒，整体风格要典雅大气',
                    '红宝石耳环':' 我想要设计一款蝴蝶灵感的红宝石耳环，热情与活力，整体风格要典雅大气',
                    '蓝宝石耳环':' 我想要设计一款哥特式风格的蓝宝石耳环，风格炸裂，造型夸张',
                    '祖母绿耳环':' 设计一款中国风的祖母绿耳环，典雅高贵，中国风',
                    '珍珠耳环':'设计精致的珍珠耳环，以海洋为灵感，风格可爱',
                    '碧玺耳环':'我想要设计一款以中国传统蝴蝶为设计元素的碧玺耳环，蝴蝶代表着自由与美好，整体设计要简洁大气，展现碧玺的多彩之美',
                    '翡翠吊坠':'我想设计一个雕刻有中国传统龙凤呈祥图案的翡翠吊坠，代表着吉祥与美好，整体设计要高贵复古',
                    '黄金吊坠':'我想要设计一款以太阳为灵感的黄金吊坠，展现太阳的辉煌与力量，整体风格要大气华丽',
                    '银吊坠':'我想要设计一款以月亮为灵感的银吊坠，展现月亮的柔美与神秘，整体风格要典雅大气',
                    '钻石吊坠':'我想要设计一款以中国传统蝴蝶为设计元素的钻石吊坠，蝴蝶代表着自由与美好，整体设计要简洁大气，展现钻石的闪耀之美',
                    '红宝石吊坠':' 我想设计一个雕刻有中国传统牡丹花的红宝石吊坠，牡丹代表着富贵与美好，整体设计要高贵华丽，展现红宝石的鲜艳与光泽',
                    '蓝宝石吊坠':'我想要设计一款以中国传统蝴蝶为设计元素的蓝宝石吊坠，蝴蝶代表着自由与美好，整体设计要简洁大气，展现蓝宝石的清澈之美',
                    '祖母绿吊坠':'我想设计一个中国风的祖母绿吊坠，复古典雅，看起来蓬勃大气',
                    '珍珠吊坠':' 我想要设计一款高贵典雅的珍珠吊坠，十分的时尚，优雅',
                    '碧玺吊坠':' 我想要设计一款以蝴蝶为灵感的碧玺吊坠，梦幻缤纷，十分迷人',
                    
                },
                cateList1:[
                 
                ],
                req:""
			};
		},
		computed: {
			...mapGetters(['isLogin', ]),
		},
		watch:{},
		mounted() {
            if(!this.req){
                this.$refs.choseType.open()
            }
		},
		onLoad(opt) {
			if (!this.isLogin) {
				toLogin()
			}else{
				
			}
            if(opt.req){
                this.req= opt.req
                this.getSameData()
            } else{
                
            }
            this.dealDesc()
            this.getType()
			
		},
        onShow() {
            this.getCount()
        },
		methods: {	
            getSameData(){
            AiSamelmg({request_id:this.req}).then(res=>{
                console.log(res)
                 this.desc =res.data.data.prompt_name
                 this.cateValue =res.data.data.material_category
                 this.cateValue1 =res.data.data.jewelry_category
                    
                 
            })
                
            },
            dealDesc(){
                        
                    for(var i in this.cateTextArr ){
                        if(i== this.cateText+this.cateText1){
                            this.desc = this.cateTextArr[i]
                        }
                    }
            },
          getType(){
                intentionType().then(res=>{
                    console.log(res)
                    this.cateList =res.data
                    this.cateText= res.data[0].type_name 
                })
                intentionCate().then(res=>{
                    console.log(res)
                    this.cateList1 =res.data
                     this.cateText1= res.data[0].category_name
                })
            },
            getCount(){
                aiCounts().then(res=>{
                    console.log(res)
                    this.today_counts = res.data.data.all_counts>0? res.data.data.today_counts:0
                })
            },
		async createAiTask(){
            if(!this.desc) return uni.showToast({
                title:'请输入描述词',
                icon:'none'
            })
            let vm =this
            serverNotice().then(async res=>{
                uni.showLoading({
                    title:'绘画中'
                })
                if(vm.loading) return
                vm.loading=true
                let data=  await  signAi({method:'POST', api:'txt2img',paramsStr:`prompt=${vm.desc}&material_category=${vm.cateValue}&jewelry_category=${vm.cateValue1}`})
                uni.hideLoading()
                vm.loading=false
                 if(data.status==200){
                     let cateText = this.cateList.find((item=> item.value== this.cateValue))
                     let cateText1 = this.cateList1.find((item=> item.value== this.cateValue1))
                     
                     
                     uni.navigateTo({
                         url:'/pages/plantGrass/plant_waiting/index?paramsStr='+data.data.request_id+'&text='+vm.desc+'&cate='+cateText.type_name+"&cate1="+cateText1.category_name
                     })
                 }else{
                     
                 }
            })
            
            },
            changeValues(data){
                this.cateValue1=data.value
                this.cateText1 = data.category_name
                this.dealDesc()
            },
                
            changeValue(data){
                this.cateValue=data.value
                this.cateText = data.type_name
                this.dealDesc()
                
            }
		},
      
	}
</script>

<style lang="scss" scoped>
    .release_content{
        padding: 36rpx;
        padding-bottom: 200rpx;
    }
    .textarea{
        align-items: center;
        textarea{
            flex: 1;
            height: 300rpx;
            line-height: 52rpx;
            border-radius: 20rpx 0px 0px 20rpx;
            background-color: rgba(28,28,30,1);
            color: rgba(136,136,136,1);
            font-size: 36rpx;
            text-align: left;
            box-shadow: 2px 2px 4px -1px rgba(167,149,224,1);
            font-family: Microsoft Yahei;
            padding: 20rpx;
        }
            
        .desc{
            left: 0px;
            top: 0px;
            width: 68rpx;
            height: 180rpx;
            line-height: 40rpx;
            border-radius: 0px 24rpx 24rpx 0px;
            background-color: rgba(167,149,224,1);
            color: rgba(255,255,255,1);
            font-size: 28rpx;
            text-align: center;
            font-family: Roboto;
            writing-mode:vertical-rl;
            letter-spacing:16rpx;
            line-height:68rpx
        }
    }
    .bottom{
        position: fixed;
        left: 0px;
        bottom: 10rpx;
        width: 100%;
        height: 160rpx;
        padding: 0 90rpx;
        background-color: rgba(28,28,30,1);
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        align-items: center;
        text-align: center;
        font-family: Roboto;
        
    }
    .createNum{
        color: rgba(154,154,154,1);
        font-size: 12px;
        .num{
            color: #A187F9;
        }
    }
    .release_btn{
        width: 400rpx;
        height: 86rpx;
        align-items: center;
        border-radius: 8rpx;
        background: linear-gradient(113.13deg, rgba(180,253,255,1) 13.49%,rgba(237,235,238,1) 24.88%,rgba(243,247,220,1) 36.6%,rgba(232,225,232,1) 57.33%,rgba(238,166,242,1) 77.25%,rgba(183,164,250,1) 93.19%,rgba(183,160,250,1) 93.19%,rgba(184,134,248,1) 93.19%);
        color: rgba(0,0,0,1);
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        font-family: Roboto;
        image{
                width: 96rpx;
        }
    }
    .cateTitle{
        align-items: center;
        margin: 40rpx 0;
        color: #9A9A9A ;
        font-size: 24rpx;
        image{
            width: 40rpx;
            height: 40rpx;
            margin-left: 20rpx;
        }
        .title{
            align-items: center;
            font-size: 36rpx;
        }
    }
    .cateContent{
        background-color: #1C1C1E;
        border-radius: 12rpx;
        padding: 24rpx;
        overflow-x: scroll;
        white-space: nowrap;
        .cateName{
            margin: 0 40rpx 20rpx 0;
            color: #415058 ;
            display: inline-block;
            view{
                display: inline-block;
                margin-bottom: 20rpx;
            }
        }
        image{
            width: 200rpx;
            height: 200rpx;
            border-radius: 6rpx;
            display: block;
        }
        .active{
            color: #9A9A9A ;
            position: relative;    
            
            &::before{
                position: absolute;
                content: '';
                clear: both;
                bottom: -10rpx;
                left: 0;
                width: 100%;
                height: 6rpx;
                
                background-color:#A187F9;
            }
           
        }
        .activeimage{
            border: 1rpx solid #A187F9;
        }
        
    }
    .choseType{
        height: 300rpx;
        width: 100%;
        background-color: #222;
        display: flex;
        border-radius: 30rpx 30rpx 0 0;
        justify-content: space-around;
        padding-top: 50rpx;
        view{
            background: #333;
            width: 300rpx;
            height: 150rpx;
            border-radius: 12rpx;
            padding: 20rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
    }
</style>
